<script setup>
import WOW from "wow.js";
import {useRouter, useRoute} from "vue-router";
import {ref, onMounted, reactive, computed, onUpdated} from "vue";
import {useCounterStore} from "../../pina/index";
const store = useCounterStore();
defineProps({
  msg: String,
});
// 一个计算属性 ref
const activeIndex2 = computed(() => {
  return store.biao;
});
let input = ref("");

const router = useRouter();
onMounted(() => {
  var wow = new WOW({
    boxClass: "wow", // animated element css class (default is wow)
    animateClass: "animated", // animation css class (default is animated)
    offset: 0, // distance to the element when triggering the animation (default is 0)
    mobile: true, // trigger animations on mobile devices (default is true)
    live: true, // act on asynchronously loaded content (default is true)
    callback: function () {},
    scrollContainer: null, // optional scroll container selector, otherwise use window,
    resetAnimation: true, // reset animation on end (default is true)
  });
  wow.init();
});

onUpdated(() => {
  console.log(12);
  var wow = new WOW({
    boxClass: "wosw", // animated element css class (default is wow)
    animateClass: "animated", // animation css class (default is animated)
    offset: 0, // distance to the element when triggering the animation (default is 0)
    mobile: true, // trigger animations on mobile devices (default is true)
    live: true, // act on asynchronously loaded content (default is true)
    callback: function () {},
    scrollContainer: null, // optional scroll container selector, otherwise use window,
    resetAnimation: true, // reset animation on end (default is true)
  });
  wow.init();
});
const handleSelect = (e) => {
  store.incremenbiao(e);
  router.push({
    name: e,
  });
};
</script>

<template>
  <!-- <iframe src="../../../public/static/index.html" width="100%" height="100%" frameborder="0"></iframe> -->
  <div class="main">
    <div class="her">
      <div style="display: flex; align-items: center">
        <img
          style="width: 50px; margin: 0 20px"
          src="../../assets/MetaboLightsLogo.png"
          alt=""
        />
        <span
          style="
            padding-top: 15px;
            font-size: 26px;
            font-weight: bold;
            color: #fff;

            font-family: Palatino Linotype;
          "
        >
          OnMet</span
        >

        <header class="header">
          <!-- <logo /> -->
          <div class="bannder">
            <el-menu
              :ellipsis="false"
              :default-active="activeIndex2"
              class="el-menu-demo"
              mode="horizontal"
              background-color=""
              active-text-color="blue"
              @select="handleSelect"
            >
              <el-menu-item index="Home"
                ><span class="dhg"> Home </span></el-menu-item
              >
              <el-menu-item index="Search"
                ><span class="dhg">Search Cancer</span>
              </el-menu-item>
              <el-menu-item index="scMetabolism">
                <span class="dhg">scMetabolism</span>
              </el-menu-item>
              <el-menu-item index="Analysis">
                <span class="dhg">Customzied Gene Search</span>
              </el-menu-item>
              <!-- <el-menu-item index="Statistics">
                <span class="dhg">Statistics</span>
              </el-menu-item> -->
              <el-menu-item index="Download">
                <span class="dhg">Download</span>
              </el-menu-item>
              <el-menu-item index="About">
                <span class="dhg">About</span>
              </el-menu-item>
            </el-menu>
          </div>
        </header>
      </div>
    </div>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>
.cole li {
  font-size: 18px;
  font-family: "微软雅黑微软雅黑";
}
.cole li:before {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #000000;
  vertical-align: middle;
  margin-right: 14px;
}

.lianright {
  width: 60%;
  height: 400px;
  background-color: red;
}
.lianxiang {
  margin-top: 30px;
}
.lianxiang li {
  font-size: 18px;
  line-height: 50px;
  color: rgb(102, 102, 102);
}
.fandh {
  font-size: 24px;
  font-weight: 700;
  color: rgb(127, 127, 127);
}
.sdsda {
  font-size: 16px !important;
}
.lianty {
  text-align: center;
  color: #5a5a5a;
}
.boleft {
  width: 40%;
  height: 400px;
  padding: 20px;
}
.dhg {
  font-family: Ebrima;
  font-weight: bold;
  font-size: 24px;
  color: #fff;
}
.lianxi {
  display: flex;

  width: 1200px;
  margin: auto;
  margin-top: 20px;
  border: 1px solid rgb(243, 243, 243);

  background-color: rgb(251, 251, 251);
}
.bm-view {
  width: 100%;

  height: 100%;
}
/* :deep(.el-tabs__item) {
  font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}

:deep(.el-tabs__active-bar) {
  background-color: #ffd04b !important;
}
:deep(.el-tabs__item:hover) {
  color: #ffd04b;
} */

.xiangc {
  background-color: rgb(251, 251, 251);
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}
.xiangc li {
  width: 100%;
  padding: 5px;
}
.xiangc li img {
  width: 100%;
  height: 80%;
  transition: all 0.2s linear;
}

.xiangc li p {
  font-family: "微软雅黑微软雅黑";
  font-size: 20px;
}

.clace {
  padding: 30px;
  width: 1200px;
  margin: auto;
  /* width: 200px;
height: 200px; */
  /* background-color: red; */
}
.serch {
  display: flex;
  align-items: center;
  width: 180px;
}
.header {
  margin-top: 10px;
  width: 100%;
  margin-left: 60px;
  /* position: absolute;
ma
  z-index: 99999; */
  display: flex;
  /* background: rgb(255, 255, 255); */
}
:deep(.el-sub-menu__title) {
  font-size: 16px;
  /* color: #fff !important; */
}
.her {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 95px;
  background-image: url(../../assets/pattern-header.png);
  background-size: 100%;
  /* background-image: linear-gradient(to right, #53c4ff, #40a3ff, #3383fe); */
}
.bannder {
  margin: auto;
  display: flex;
  justify-content: center;
}
:deep(.el-menu) {
  width: 100%;
  background: 0;

  /* background: rgba(0, 0, 0, 0); */
}
:deep(.el-menu-item) {
  font-size: 18px;
  /* color: #fff !important; */
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover) {
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.5);
}
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(.el-menu--horizontal > .el-menu-item.is-active) {
  border-bottom: 2px solid #fff !important;
}
:deep(
    .el-menu--horizontal .el-menu .el-menu-item,
    .el-menu--horizontal .el-menu .el-sub-menu__title
  ) {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
:deep(.el-menu-item:hover) {
  color: blue !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.el-menu--horizontal.el-menu {
  border-bottom: 0;
}

:deep(.el-tabs__item.is-active) {
  border-bottom: 1px solid #ffffff !important;
}
</style>
